<!--
 * @Author: LiSong
 * @Date: 2023-06-07
 * @Description: 添加或修改菜单弹窗
-->
<template>
	<rk-dialog width="60%" height="75%" :title="config.title" :visible="visible" :destroyOnClose="true" @close="visible = false" :maskClosable="false">
		<template #default>
			<MenuInfoForm ref="menuInfoFormRef" :parentNode="parentNode" :echoFormData="echoFormData" />
		</template>
		<template #footer>
			<el-button type="primary" @click="handleConfirm">确定</el-button>
			<el-button @click="handleClose">取消</el-button>
		</template>
	</rk-dialog>
</template>

<script setup>
import XEUtils from 'xe-utils';
import MenuInfoForm from './MenuInfoForm.vue';
import { MENU_TYPE_CONS } from '@/enums/enums-menu.js';
import { ElMessage } from 'element-plus';
import { useMenuApi } from '@/api';

const { addMenu, updateMenu } = useMenuApi();

// 组件的传参
const props = defineProps({
	parentNode: { type: Object },
});

// emits
const emits = defineEmits(['confirm', 'close']);

// emits 相关
const emitConfirm = () => {
	emits('confirm');
};
const emitClose = () => {
	emits('close');
};

const modeOfTitle = {
	add: { value: 'add', title: '添加菜单' },
	edit: { value: 'edit', title: '修改菜单' },
	info: { value: 'info', title: '查看菜单' },
};

// ----- 弹出层相关配置
const config = reactive({
	type: modeOfTitle.add.value,
	title: modeOfTitle.add.title,
});
// 显示隐藏弹窗
const visible = ref(false);
// 当前选中的表格行
const currentRow = ref({});
// 弹窗面板模式 add|edit|info
const btnTypeCode = ref();
// 用于回显的数据
const echoFormData = ref({});
// 表单模板引用对象
const menuInfoFormRef = ref();
/**
 * 对外暴露的添加方法
 *
 * @param {Object} param {
 *  currentRow, // 表格选中的row
 *  parentNode, // 选中的父节点
 *  tableData, // 表格数据
 * }
 */
const handleAdd = ({ currentRow, parentNode, tableData }) => {
	config.type = modeOfTitle.add.value;
	config.title = modeOfTitle.add.title;
	btnTypeCode.value = modeOfTitle.add.value;
	handleOpen({ currentRow, parentNode, tableData });
};
/**
 * 对外暴露的修改方法
 *
 * @param {Object} param {
 *  currentRow, // 表格选中的row
 *  parentNode, // 选中的父节点
 *  tableData, // 表格数据
 * }
 */
const handleEdit = ({ currentRow, parentNode, tableData }) => {
	config.type = modeOfTitle.edit.value;
	config.title = modeOfTitle.edit.title;
	btnTypeCode.value = modeOfTitle.edit.value;
	echoFormData.value = XEUtils.clone(currentRow, true);
	handleOpen({ currentRow, parentNode, tableData });
};
const handleOpen = ({ currentRow, parentNode, tableData }) => {
	const { menuCount, buttonCount } = getCountInfo({ parentNode, tableData });
	let echoForm = {
		menuCount,
		buttonCount,
		levelNo: parentNode?.extraInfo.nextLevelNo,
		fullUrl: parentNode?.extraInfo.nextFullUrl,
		menuOrder: menuCount + 1,
		menuCode: parentNode?.menuCode,
		parentId: parentNode?.menuCode,
		parentMenuName: parentNode?.menuName,
	};
	echoFormData.value = { ...echoForm, ...currentRow };
	visible.value = true;
};
const handleReset = () => {
	visible.value = false;
};
const handleClose = () => {
	handleReset();
	emitClose();
};
const handleConfirm = async () => {
	const valid = await menuInfoFormRef.value.validateForm();
	if (valid) {
		handleSave();
	}
};
const handleSave = () => {
	const formData = menuInfoFormRef.value.getFormData();
	if (btnTypeCode.value === 'add') {
		addMenu(formData)
			.then((res) => {
				const { code, msg } = res;
				if (code === 200) {
					ElMessage.success('保存成功！');
					handleReset();
					emitConfirm();
				} else {
					ElMessage.error(msg);
				}
			})
			.catch((err) => {
				console.error(err);
				ElMessage.error('保存失败！');
			});
	} else if (btnTypeCode.value === 'edit') {
		updateMenu(formData)
			.then((res) => {
				const { code, msg } = res;
				if (code === 200) {
					ElMessage.success('保存成功！');
					handleReset();
					emitConfirm();
				} else {
					ElMessage.error(msg);
				}
			})
			.catch((err) => {
				console.error(err);
				ElMessage.error('保存失败！');
			});
	}
};

const getCountInfo = ({ parentNode, tableData }) => {
	let menuCount = 0,
		buttonCount = 0;
	if (tableData && tableData.length > 0) {
		(menuCount = 0), (buttonCount = 0);
		tableData.forEach((record) => {
			if (record.menuCode !== parentNode.menuCode && record.parentId === parentNode.menuCode) {
				if (record.menuType === MENU_TYPE_CONS.MENU.value) {
					menuCount++;
				}
				if (record.menuType === MENU_TYPE_CONS.BUTTON.value) {
					buttonCount++;
				}
			}
			// 处理选中全部节点数据
			if (!parentNode.menuCode && !record.parentId) {
				if (record.menuType === MENU_TYPE_CONS.MENU.value) {
					menuCount++;
				}
			}
		});
	} else {
		(menuCount = 0), (buttonCount = 0);
		if (parentNode.children && parentNode.children.length > 0) {
			parentNode.children.forEach((record) => {
				if (record.menuType === MENU_TYPE_CONS.MENU.value) {
					menuCount++;
				}
				if (record.menuType === MENU_TYPE_CONS.BUTTON.value) {
					buttonCount++;
				}
			});
		}
	}
	return { menuCount, buttonCount };
};

defineExpose({
	handleAdd,
	handleEdit,
	handleOpen,
});
</script>

<style lang="scss" scoped></style>
